<script setup>
defineProps({
  hideBorder: {
    type: Boolean,
    default: false
  },
  avoidTabs: {
    type: Boolean,
    default: false
  }
})
</script>

<template>
  <view class="secondary-tab-bar" :class="{'avoid-tabs': avoidTabs, 'hide-border': hideBorder}">
    <slot>
      <h2>secondary-tab-bar</h2>
    </slot>
  </view>
</template>

<style lang="scss" scoped>
.secondary-tab-bar {
  @include grid-box;
  align-items: center;
  align-content: center;
  padding: $spacing-4 $spacing-2;
  background: $white;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid $divider;
}

.avoid-tabs {
  bottom: 140rpx;
}

.hide-border {
  border-color: transparent;
}
</style>
